<template>
    <div class="BoxTre">
        <h2 class="BoxTre-Title">当季推荐</h2>
        <ul class="BoxTre-Img">
            <li>
                <img src="/static/BoxTre/BoxTre_1.png" alt="" width="100%" height="100%">
            </li>
            <li>
                <img src="/static/BoxTre/BoxTre_2.jpeg" alt="" width="100%" height="100%">
            </li>
            <li>
                <img src="/static/BoxTre/BoxTre_3.jpeg" alt="" width="100%" height="100%">
            </li>
            <li>
                <img src="/static/BoxTre/BoxTre_4.jpeg" alt="" width="100%" height="100%">
            </li>
            <router-link tag="li" to="/detail?id=1">
                <img src="/static/BoxTre/BoxTre_5.jpeg" alt="" width="100%" height="100%">
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'BoxTre'
}
</script>
<style lang="stylus" scoped>
    .BoxTre
        position: absolute;
        top: 1208px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 1192px;
        height: 435px;
        .BoxTre-Title
            font-size: 22px;
            line-height: 40px;
            font-weight: 600;
            text-align: left;
        .BoxTre-Img
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            height: 396px;
            background: #fff;
        .BoxTre-Img>li
            width: 220px;
            height: 364px;
            background: pink;
            overflow: hidden;
        .BoxTre-Img>li>img
            transform: scale(1);
            transition: .5s;
        .BoxTre-Img>li:hover>img
            transform: scale(1.2);
    
</style>